import React from 'react';
import { Layout, Menu, Button } from 'antd';
import { Link, connect } from 'umi';
import logo from '../../assets/logo.png';
import BarCharts from '../../components/bar';
import AlertReason from '../../components/AlertReason';
import ScatterCharts from '../../components/scatter';
import OnlineCharts from '../../components/online';
const { Header, Content, Footer } = Layout;

function BasicLayout(props: any) {
  const logout = () => {
    props.dispatch({
      type: 'login/logout',
    });
  };

  function home() {
    window.location.href = '/zone';
  }

  function back() {
    window.location.href = '/area';
  }

  return (
    <Layout style={{ height: '100%', fontFamily: 'global' }}>
      <Header>
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={['3']}
          style={{ lineHeight: '64px' }}
        >
          <Menu.Item key="1">
            <img src={logo} onClick={home} style={{ width: '60px' }} />
          </Menu.Item>
          <Menu.Item key="2">
            <Link to="area">中间工段 </Link>
          </Menu.Item>
          <Menu.Item key="3">
            <Link to="cam">摄像头1</Link>
          </Menu.Item>
          <Button
            style={{ position: 'fixed', right: '20px', top: '15px' }}
            onClick={back}
          >
            返回
          </Button>
        </Menu>
      </Header>
      <Content
        style={{ padding: '10px 20px', height: '100%', background: '#001529' }}
      >
        <table style={{ width: '100%', height: '100%', padding: 0 }}>
          <tr style={{ height: '30%' }}>
            <td className="bd" style={{ width: '30%' }}>
              <iframe
                src="http://120.79.77.107:10000/play.html?serial=34020000001320000014&code=34020000001320000014&aspect=fullscreen"
                width="100%"
                height="100%"
                allow="autoplay; fullscreen"
                // style={{ border: "1px solid #000" }}
              ></iframe>
            </td>
            <td className="bd" style={{ width: '30%' }}>
              <div
                style={{
                  width: '100%',
                  height: '100%',
                  textAlign: 'center',
                  display: 'flex',
                  alignItems: 'center',
                }}
              >
                <div
                  style={{
                    verticalAlign: 'middle',
                    width: '100%',
                    height: '20px',
                    display: 'inline-box',
                  }}
                >
                  空
                </div>
              </div>
            </td>
          </tr>
          <tr className="bd" style={{ height: '30%' }}>
            <td className="bd">
              <div
                style={{
                  width: '100%',
                  height: '100%',
                  textAlign: 'center',
                  display: 'flex',
                  alignItems: 'center',
                }}
              >
                <div
                  style={{
                    verticalAlign: 'middle',
                    width: '100%',
                    height: '20px',
                    display: 'inline-box',
                  }}
                >
                  空
                </div>
              </div>
            </td>
            <td className="bd">
              <div
                style={{
                  width: '100%',
                  height: '100%',
                  textAlign: 'center',
                  display: 'flex',
                  alignItems: 'center',
                }}
              >
                <div
                  style={{
                    verticalAlign: 'middle',
                    width: '100%',
                    height: '20px',
                    display: 'inline-box',
                  }}
                >
                  空
                </div>
              </div>
            </td>
          </tr>
        </table>
        {props.children}
      </Content>
      <div
        style={{
          textAlign: 'center',
          height: '30px',
          padding: '5px',
          background: '#001529',
          color: 'white',
        }}
      >
        深高速AI监控平台
      </div>
    </Layout>
  );
}

export default connect()(BasicLayout);
